<template>
  <div class="all" p-5>
    <div class="all-top">
      <div class="all-top-tittle">卷宗查看</div>
    </div>
    <a-tabs class="all-tabs" v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="案件信息">
        <div class="archive">
          <div class="archive-steps" v-if="route.query.status != '1' && route.query.status != '5'">
            <a-steps :current="caseStatus(penaltyData?.status)" :items="steps"></a-steps>
          </div>
          <div class="archive-body">
            <div class="archive-body-left">
              <div class="taskBox" v-if="penaltyData?.taskId || penaltyData?.resultFileUrl">
                <div class="taskBox-top" style="padding: 10px 12px">
                  <div>任务信息</div>
                  <a-button type="primary" ghost @click="goTask" v-if="penaltyData?.taskId"
                    >查看任务</a-button
                  >
                </div>
                <div class="taskBox-bottom" v-if="penaltyData?.resultFileUrl">
                  <BookCreate
                    :type="17"
                    :url="penaltyData?.resultFileUrl"
                    @getBookUrl="getBookUrl"
                  />
                </div>
              </div>
              <div class="taskBox">
                <div class="taskBox-top">
                  <div>立案审批表</div>
                </div>
                <div class="taskBox-bottom">
                  <a-row>
                    <BookCreate
                      :type="13"
                      :caseId="route.query.id"
                      :url="lafileInfoData.oldFileUrl"
                      :newFileUrl="lafileInfoData.newFileUrl"
                      :caseFileId="lafileInfoData.id"
                      :isShow="false"
                      @getBookUrl="getBookUrl"
                  /></a-row>
                </div>
              </div>
              <div class="taskBox">
                <div class="taskBox-top">
                  <div>调查取证</div>
                </div>
                <div class="taskBox-bottom">
                  <a-row>
                    <BookCreate
                      :type="7"
                      :caseId="route.query.id"
                      :url="dcfileInfoData.oldFileUrl"
                      :newFileUrl="dcfileInfoData.newFileUrl"
                      :caseFileId="dcfileInfoData.id"
                      :isShow="false"
                      @getBookUrl="getBookUrl"
                  /></a-row>
                  <a-row>
                    <BookCreate
                      :type="12"
                      :caseId="route.query.id"
                      :url="cwfileInfoData.oldFileUrl"
                      :newFileUrl="cwfileInfoData.newFileUrl"
                      :caseFileId="cwfileInfoData.id"
                      :isShow="false"
                      @getBookUrl="getBookUrl"
                  /></a-row>
                  <a-row>
                    <BookCreate
                      :type="14"
                      :caseId="route.query.id"
                      :url="qlfileInfoData.oldFileUrl"
                      :newFileUrl="qlfileInfoData.newFileUrl"
                      :caseFileId="qlfileInfoData.id"
                      :isShow="false"
                      @getBookUrl="getBookUrl"
                  /></a-row>
                  <a-row>
                    <BookCreate
                      :type="15"
                      :caseId="route.query.id"
                      :url="xwfileInfoData.oldFileUrl"
                      :newFileUrl="xwfileInfoData.newFileUrl"
                      :caseFileId="xwfileInfoData.id"
                      :isShow="false"
                      @getBookUrl="getBookUrl"
                  /></a-row>
                  <a-row>
                    <BookCreate
                      :type="11"
                      :caseId="route.query.id"
                      :url="xzfileInfoData.oldFileUrl"
                      :newFileUrl="xzfileInfoData.newFileUrl"
                      :caseFileId="xzfileInfoData.id"
                      :isShow="false"
                      @getBookUrl="getBookUrl"
                  /></a-row>
                </div>
              </div>
              <div class="taskBox">
                <div class="taskBox-top">
                  <div>处理文书</div>
                </div>
                <div class="taskBox-bottom">
                  <a-row>
                    <BookCreate
                      :type="1"
                      :caseId="route.query.id"
                      :url="xzcffileInfoData.oldFileUrl"
                      :newFileUrl="xzcffileInfoData.newFileUrl"
                      :caseFileId="xzcffileInfoData.id"
                      :isShow="false"
                      @getBookUrl="getBookUrl"
                  /></a-row>
                </div>
              </div>
              <div class="taskBox">
                <div class="taskBox-top">
                  <div>文书送达回证</div>
                </div>
                <div class="taskBox-bottom">
                  <a-row>
                    <BookCreate
                      :type="16"
                      :caseId="route.query.id"
                      :url="sdhzfileInfoData.oldFileUrl"
                      :newFileUrl="sdhzfileInfoData.newFileUrl"
                      :caseFileId="sdhzfileInfoData.id"
                      :isShow="false"
                      @getBookUrl="getBookUrl"
                  /></a-row>
                </div>
              </div>
            </div>
            <div class="archive-body-right" :style="changeWith(route.query.status)">
              <PenaltyInfo :id="route.query.id" :title="false"></PenaltyInfo>
            </div>
          </div>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="立案审批记录" force-render>
        <DynamicTable
          :columns="columns"
          :data-request="loadData"
          bordered
          :search="false"
          :showToolBar="false"
        />
      </a-tab-pane>
      <a-tab-pane key="3" tab="案件处理审批记录">
        <DynamicTable
          :columns="columns"
          :data-request="loadData2"
          bordered
          :search="false"
          :showToolBar="false"
      /></a-tab-pane>
    </a-tabs>
    <div class="bottomBox"></div>
    <div class="bottomBtns" style="z-index: 3">
      <a-button size="large" @click="cacel">关闭</a-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import PenaltyInfo from '../../components/penaltyInfo.vue';
  import { useTable } from '@/components/core/dynamic-table';

  const activeKey = ref('1');
  import router from '@/router';
  import { useRoute } from 'vue-router';
  import { caseDetail } from '@/api/administrativePenalty/case-management';
  import BookCreate from '@/components/basic/book-create/index.vue';

  const route = useRoute();
  const [DynamicTable, dynamicTableInstance] = useTable();

  const goTask = () => {
    router.push({
      path: '/supervision/task-view',
      query: { id: penaltyData.value.taskId },
    });
  };

  const cacel = () => {
    router.push({
      path: '/administrative-penalty/administrative-penalty/archive-query',
    });
  };

  const penaltyData = ref();

  //立案审批记录
  const registerList = ref();

  //案件处理审批记录
  const handleList = ref();

  const changeWith = (val) => {
    console.log(val);

    if (val == '1') {
      return 'width: 100%;';
    }
  };

  const caseFlowNodeName = (val) => {
    switch (val) {
      case 1:
        return '主办人';
      case 2:
        return '协办人';
      case 3:
        return '承办单位';
      case 4:
        return '大队法制';
      case 5:
        return '大队长';
      case 6:
        return '立案审批节点';
      default:
        return '-';
    }
  };

  const caseNodeStatus = (val) => {
    switch (val) {
      case 1:
        // return '待审批';
        return '-';
      case 2:
        return '同意';
      case 3:
        return '不同意';
      default:
        return '-';
    }
  };

  const steps = [
    {
      title: '调查取证',
    },
    {
      title: '案件处理',
    },
    {
      title: '结案归档',
    },
  ];

  const columns = [
    {
      title: '节点名称',
      dataIndex: 'flowNodeName',
      hideInSearch: true,
    },
    {
      title: '审批人',
      dataIndex: 'approveName',
      hideInSearch: true,
    },
    {
      title: '审批时间',
      dataIndex: 'approveTime',
      hideInSearch: true,
    },
    {
      title: '审批结果',
      dataIndex: 'nodeStatus',
      hideInSearch: true,
      customRender: ({ record }) => caseNodeStatus(record.nodeStatus),
    },
    {
      title: '审批意见',
      dataIndex: 'approveOpinions',
      hideInSearch: true,
    },
  ];

  const loadData = async (params): Promise<API.TableListResult> => {
    const data = await caseDetail(route.query.id as any, 1);
    penaltyData.value = data;
    if (penaltyData.value.registerList) {
      registerList.value = penaltyData.value.registerList;
    }
    console.log(registerList.value);

    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: registerList.value,
          ...params,
        });
      }, 500);
    });
  };

  const loadData2 = async (params): Promise<API.TableListResult> => {
    const data = await caseDetail(route.query.id as any, 1);
    penaltyData.value = data;
    if (penaltyData.value.handleList) {
      handleList.value = penaltyData.value.handleList;
    }

    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: handleList.value,
          ...params,
        });
      }, 500);
    });
  };
  const caseStatus = (val) => {
    switch (val) {
      case 2:
        return 0;
      case 3:
        return 1;
      case 4:
        return 2;
      default:
        return 3;
    }
  };

  //立案审批表
  const lafileInfoData = ref({
    oldFileUrl: '',
    newFileUrl: '',
    id: '',
  });

  //调查取证通知书
  const dcfileInfoData = ref({
    oldFileUrl: '',
    newFileUrl: '',
    id: '',
  });

  //询问通知书
  const cwfileInfoData = ref({
    oldFileUrl: '',
    newFileUrl: '',
    id: '',
  });

  //权力义务告知书
  const qlfileInfoData = ref({
    oldFileUrl: '',
    newFileUrl: '',
    id: '',
  });

  //询问笔录
  const xwfileInfoData = ref({
    oldFileUrl: '',
    newFileUrl: '',
    id: '',
  });

  //行政处罚告知笔录
  const xzfileInfoData = ref({
    oldFileUrl: '',
    newFileUrl: '',
    id: '',
  });

  //行政处罚决定书
  const xzcffileInfoData = ref({
    oldFileUrl: '',
    newFileUrl: '',
    id: '',
  });

  //送达回证
  const sdhzfileInfoData = ref({
    oldFileUrl: '',
    newFileUrl: '',
    id: '',
  });

  const caseDetailApi = async () => {
    const data = await caseDetail(route.query.id as any, 1);
    penaltyData.value = data;

    if (penaltyData.value.registerList) {
      registerList.value = penaltyData.value.registerList;
      console.log(registerList.value);
    }
    if (penaltyData.value.handleList) {
      handleList.value = penaltyData.value.handleList;
    }

    if (penaltyData.value.fileInfoList.length) {
      if (penaltyData.value.fileInfoList.filter((item) => item.fileType == 1).length) {
        lafileInfoData.value = penaltyData.value.fileInfoList.filter(
          (item) => item.fileType == 1,
        )[0];
      } else {
        lafileInfoData.value = {
          oldFileUrl: '',
          newFileUrl: '',
          id: '',
        };
      }
      if (penaltyData.value.fileInfoList.filter((item) => item.fileType == 2).length) {
        dcfileInfoData.value = penaltyData.value.fileInfoList.filter(
          (item) => item.fileType == 2,
        )[0];
      } else {
        dcfileInfoData.value = {
          oldFileUrl: '',
          newFileUrl: '',
          id: '',
        };
      }
      if (penaltyData.value.fileInfoList.filter((item) => item.fileType == 3).length) {
        cwfileInfoData.value = penaltyData.value.fileInfoList.filter(
          (item) => item.fileType == 3,
        )[0];
      } else {
        cwfileInfoData.value = {
          oldFileUrl: '',
          newFileUrl: '',
          id: '',
        };
      }
      if (penaltyData.value.fileInfoList.filter((item) => item.fileType == 4).length) {
        qlfileInfoData.value = penaltyData.value.fileInfoList.filter(
          (item) => item.fileType == 4,
        )[0];
      } else {
        qlfileInfoData.value = {
          oldFileUrl: '',
          newFileUrl: '',
          id: '',
        };
      }

      if (penaltyData.value.fileInfoList.filter((item) => item.fileType == 5).length) {
        xwfileInfoData.value = penaltyData.value.fileInfoList.filter(
          (item) => item.fileType == 5,
        )[0];
      } else {
        xwfileInfoData.value = {
          oldFileUrl: '',
          newFileUrl: '',
          id: '',
        };
      }
      if (penaltyData.value.fileInfoList.filter((item) => item.fileType == 6).length) {
        xzfileInfoData.value = penaltyData.value.fileInfoList.filter(
          (item) => item.fileType == 6,
        )[0];
      } else {
        xzfileInfoData.value = {
          oldFileUrl: '',
          newFileUrl: '',
          id: '',
        };
      }
      if (penaltyData.value.fileInfoList.filter((item) => item.fileType == 7).length) {
        xzcffileInfoData.value = penaltyData.value.fileInfoList.filter(
          (item) => item.fileType == 7,
        )[0];
      } else {
        xzcffileInfoData.value = {
          oldFileUrl: '',
          newFileUrl: '',
          id: '',
        };
      }
      if (penaltyData.value.fileInfoList.filter((item) => item.fileType == 8).length) {
        sdhzfileInfoData.value = penaltyData.value.fileInfoList.filter(
          (item) => item.fileType == 8,
        )[0];
      } else {
        sdhzfileInfoData.value = {
          oldFileUrl: '',
          newFileUrl: '',
          id: '',
        };
      }
    }
  };

  onMounted(async () => {
    if (route.query.id) {
      caseDetailApi();
    }
  });

  const getBookUrl = (data) => {
    console.log(data);
    caseDetailApi();
  };
</script>
<style lang="less" scoped>
  .all {
    background-color: #ffffff;

    &-top {
      &-tittle {
        padding: 0px 0 16px 0;
        font-size: 18px;
        font-weight: 700;
        line-height: 26px;
        color: rgba(68, 68, 68, 1);

        border-bottom: 1px solid rgba(240, 240, 240, 1);
      }
    }

    &-tabs {
      :global(.all-tabs.ant-tabs-top .ant-tabs-nav) {
        margin: 0 0 12px 0 !important;
      }
    }

    .archive {
      width: 100%;

      &-steps {
        width: 100%;
        height: 100px;
        border: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
        padding: 0 300px;
      }

      &-body {
        display: flex;
        justify-content: space-between;
        margin-top: 12px;

        &-left {
          width: 30%;
          border: 1px solid #f0f0f0;
          margin-right: 12px;

          .taskBox {
            width: 100%;
            border-bottom: 1px solid #f0f0f0;

            &-top {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 14px 12px;
              background: #fafafa;
              border-bottom: 1px solid #f0f0f0;

              font-size: 14px;
              font-weight: 500;
              color: #444444;
            }
          }

          .taskBox:last-child {
            border-bottom: 0;
          }
        }

        &-right {
          width: 70%;
          border: 1px solid #f0f0f0;
          padding: 0px 18px 0 16px;
        }
      }
    }
  }
</style>
